<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>会员登录</title>
<link rel="icon" href="${pageContext.request.contextPath}/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.structure.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.theme.min.css" />

<style>
.error {
	color: red;
	font-size: 12px;
}
</style>
<script type="text/javascript">

	function checkImage(obj){
		obj.src="${pageContext.request.contextPath }/login?method=sendVerifyCode&time="+new Date().getTime();
	}

	
	
	$.validator.addMethod(
		"islogincode",
		function(value, element) {
			var flag = false;
			$.ajax({  
		        "async":false,  
		        "url":"${pageContext.request.contextPath }/login?method=verificationCode",  
		        "data":{"logincode":value},  
		        "type":"POST",  
		        "dataType":"json", 
		        "success" : function(data) {  
		            flag = data.isExist;
		        }
		    });
		return flag;
	});
	
	
	$.validator.addMethod(
		"isMobile",
		function(value, element) {
			var flag = false;
			$.ajax({
				"async" : false,
				"url" : "${pageContext.request.contextPath}/login?method=isMobile",
				"data" : {"userphone" : value},
				"type" : "POST",
				"dataType" : "json",
				"success" : function(data) {
					flag = data.isExist;
				}
			});
			return flag;
		});
	
	/* $.validator.addMethod(
			"isverification",
			function(value, element) {
				var flag = false;
				$.ajax({
					"async" : false,
					"url" : "${pageContext.request.contextPath}/login?method=verification",
					"data" : {
						"userphone" : value,
						"password":value
						},
					"type" : "POST",
					"dataType" : "json",
					"success" : function(data) {
						flag = data.isExist;
					}
				});
				return flag;
			}); */


	$(function() {
		$("#loginform").validate({
			rules : {
				"password" : {
					"required" : true,
					"rangelength" : [ 6, 16 ]
				},
				"userphone" : {
					"required" : true,
					"minlength" : 11,
					"isMobile" : true
				},
				"logincode" : {
					"required" : true,
					"islogincode":true
				}/* ,
				"submit":{
					"isverification":true
				} */
				
			},
			messages : {
				"password" : {
					"required" : "密码不能为空",
					"rangelength" : "密码长度6-16位"
				},
				"userphone" : {
					"required" : "请输入手机号",
					"minlength" : "确认手机不能小于11个字符",
					"isMobile" : "该手机号未被注册"
				},
				"logincode" : {
					"required" : "请输入验证码",
					"islogincode":"验证码不符"
				}/* ,
				"submit":{
					"isverification":"用户名与密码不符"
				} */
				
			}
		});
	});
</script>

</head>
<body>

	<!-- 引入header.jsp -->
	<jsp:include page="header.jsp"></jsp:include>
	<div class="container"
		style="width: 100%; height: 460px; background-color: #FF2C4C ;">
		<div class="row">
			<div class="col-md-7">
				<!--<img src="./image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">-->
			</div>

			<div class="col-md-5">
				<div
					style="width: 500px; border: 1px solid #E7E7E7; padding: 20px 0 20px 30px; border-radius: 5px; margin-top: 60px; background: #fff;">
					<font>会员登录</font>
					<div>
						<span style="color:red">${loginError}</span>
					</div>
					<form class="form-horizontal"  id="loginform" method="post" action="${pageContext.request.contextPath }/login?method=verification">
						
						<input type="hidden" name="method" value="login">
						
						<div class="form-group">
							<label for="userphone" class="col-sm-2 control-label">手机号</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" id="userphone" name="userphone"
									placeholder="请输入您注册的手机号码">
							</div>
						</div>
						<div class="form-group">
							<label for="password" class="col-sm-2 control-label">密码</label>
							<div class="col-sm-6"> 
								<input type="password" class="form-control" id="password" name="password"
									placeholder="请输入密码">
							</div>
						</div>
						<div class="form-group">
							<label for="logincode" class="col-sm-2 control-label">验证码</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" id="logincode" name="logincode"
									placeholder="请输入验证码">
							</div>
							<div class="col-sm-3">
							<img  onclick="checkImage(this)" src="${pageContext.request.contextPath }/login?method=sendVerifyCode" width="70" height="35">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<div class="checkbox">
									<label> 
										<input type="checkbox" name="autoLogin" value="autoLogin"> 自动登录
									</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<input type="submit" width="100" value="登录" name="submit" id="submit"
									style=" background-color:red; height: 35px; width: 100px; color: white;">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>


	<!-- 引入footer.jsp -->
	<jsp:include page="footer.jsp"></jsp:include>
	
</body>
</html>